<template>
  <a-menu
    :openKeys="openKeys"
    :selectedKeys="selectedKeys"
    :style=" collapsed ? 'height: 100%;' : 'width: 256px;height: 100%;' "
    mode="inline"
    theme="dark"
    :inlineCollapsed="collapsed"
    @click="handleClick"
  >
    <a-sub-menu v-for="(item, index) in currentModuleMenuList" :key="item.href">
      <template #icon>
        <AppstoreOutlined />
      </template>
      <template #title>{{ item.name }}</template>
      <my-sub-menu :menuList="item.children"></my-sub-menu>
    </a-sub-menu>
  </a-menu>
</template>

<script>

import { defineComponent, ref, watch, computed,  toRaw } from 'vue';
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import mySubMenu from './mySubMenu'
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default {
    components: {
        MailOutlined,
        QqOutlined,
        AppstoreOutlined,
        SettingOutlined,
        mySubMenu
    },
    setup() {

        const store = useStore()
        const router = useRouter()
        const route = useRoute()

        const { menuList } = store.state      // 所有 模块 的 菜单 数据
        const { path } = route

        const currentModuleMenuList = computed(() => {
          return findModuleMenuList(menuList)
        })

        const collapsed = computed(() => store.state.collapsed)

        const openKeys = computed(() =>{
          if(collapsed.value) return []     // 如果是折叠状态  不 展开
          return findOpenKeys(currentModuleMenuList.value)
        })

        const selectedKeys = computed(() => [route.path])

        function findOpenKeys(currentModuleMenuList){

          for(let i = 0; i < currentModuleMenuList.length; i++){
            if(currentModuleMenuList[i].href === route.path){   // 找到了
              return [currentModuleMenuList[i].href]
            }

            const { children } = currentModuleMenuList[i]

            if(children && children.length > 0){

              const value = findOpenKeys(children)
              if(value) return [currentModuleMenuList[i].href].concat(value)
            }

          }
        }

        function findModuleMenuList(menuList){
          for(let i = 0; i < menuList.length; i ++){

            const value = findCurrentMenu(menuList[i], menuList[i])
            if(value) return value
          }
        }

        function findCurrentMenu(list, moduleMenuList, openKeys){
          for(let i = 0; i < list.length; i ++){
            if(list[i].href === route.path){
              return moduleMenuList
            }
            if(list[i].children && list[i].children.length > 0){
              const value = findCurrentMenu(list[i].children, moduleMenuList)
              if(value) return value
            }
          }
        }

        const handleClick = ({ key:path }) => {
        // console.log('click', e);
          router.push(path)
        };

        const titleClick = e => {
        console.log('titleClick', e);
        };

        return {
          selectedKeys,
          openKeys,
          handleClick,
          titleClick,
          selectedKeys,
          currentModuleMenuList,
          collapsed
        }
    }
}
</script>